<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/inc::header"/>
<body>
<form class="layui-form" style="margin-top: 15px">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 50px">昵称:</label>
        <div class="layui-input-inline">
            <input type="text" name="nickName" id="nickName" autocomplete="off"
                   class="layui-input">
        </div>
        <label class="layui-form-label" style="width: 40px">号码:</label>
        <div class="layui-input-inline">
            <input type="text" name="account" id="account" autocomplete="off"
                   class="layui-input">
        </div>
        <label class="layui-form-label" style="width: 80px">是否为会员:</label>
        <div class="layui-input-inline">
            <select name="isVip" id="isVip">
                <option value="">全部</option>
                <option value="0">非会员</option>
                <option value="1">试用会员</option>
                <option value="2">任享会员</option>
                <option value="3">畅享会员</option>
            </select>
        </div>
        <label class="layui-form-label" style="width: 80px">注册时间:</label>
        <div class="layui-input-inline" style="width:7%">
            <input type="text" class="layui-input" id="addTimeSt" name="addTimeSt">
        </div>
        <div class="layui-input-inline" style="width:7%">
            <input type="text" class="layui-input" id="addTimeEt" name="addTimeEt">
        </div>
        <button class="layui-btn" id="searchBtn" lay-submit lay-filter="searchBtn">查询</button>
        <a id="down" class="layui-btn layui-btn-radius" download="会员信息.csv" href="#">导出</a>
    </div>
</form>
<table class="layui-table" id="grid" lay-filter="grid">
</table>
<script th:replace="/common/inc::incJs"></script>
<script>
    var allStr;

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#addTimeSt', //指定元素
            format: 'yyyy-MM-dd'
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#addTimeEt', //指定元素
            format: 'yyyy-MM-dd'
        });
    });

    $(function () {
        var tableIns = createTable({
            url: 'customerList',
            cols: [[
                {field: 'nickName', title: '昵称', width: 160}, {field: 'userName', title: '姓名', width: 160}
                , {field: 'account', title: '账号', width: 160}, {
                    field: 'isVip',
                    title: '会员等级',
                    width: 150,
                    templet: '#vipTpl'
                }, {
                    field: 'isVip',
                    title: '开通会员渠道',
                    width: 200,
                    templet: '#openVipTpl'
                }, {field: 'isBlacklist', title: '是否在推广黑名单', width: 180, templet: '#blacklistTpl'}, {
                    field: 'tgCount',
                    title: '推广人数',
                    width: 150
                }, {
                    field: 'createTime',
                    title: '注册时间',
                    width: 150
                },{
                    field: 'vipEndDate',
                    title: '会员到期时间',
                    width: 150
                }, {
                    fixed: 'right',
                    title: '操作',
                    width: 400,
                    align: 'center',
                    toolbar: '#opbar'
                }
            ]]
        });

        $.post('/backend/security/customer/customerList', function (res) {
            if (res.code < 0) {
                layer.msg(res.message);
            }
            else {
                allStr = res.body;
            }
        });

        $('#down').on('click', function (aLink) {
            var table = layui.table;
            var tab = allStr;
            var str = "昵称,姓名,账号,会员等级,开通会员渠道,注册时间\n";
            var isVipStr = "";
            var openVipStr = "";
            $.each(tab, function (i, row) {
                if (row["isVip"] == "0") {
                    isVipStr = "非会员";
                } else if (row["isVip"] == "1") {
                    isVipStr = "适用会员";
                } else if (row["isVip"] == "2") {
                    isVipStr = "任享会员";
                } else if (row["isVip"] == "3") {
                    isVipStr = "畅享会员";
                }

                if (parseInt(row["isVip"]) > 0 && parseInt(row["codeId"]) > 0) {
                    openVipStr = "兑换码";
                } else if (parseInt(row["isVip"]) > 0 && parseInt(row["parentCustomerId"]) > 0) {
                    openVipStr = "推广二维码";
                } else if (parseInt(row["isVip"]) > 0 && parseInt(row["parentBdUserId"]) > 0) {
                    openVipStr = "员工推广";
                } else if (parseInt(row["isVip"]) > 0 && parseInt(row["parentBdId"]) > 0) {
                    openVipStr = "代理商推广";
                } else if (parseInt(row["isVip"]) > 0) {
                    openVipStr = "平台开通";
                }
                str = str + row["nickName"] + "," + row["userName"] + "," + row["account"] + "," + isVipStr + "," + openVipStr + "," + row["createTime"] + "\n";

                isVipStr = "";
                openVipStr = "";
            });
            str = encodeURIComponent(str);
            aLink.target.href = "data:text/csv;charset:utf-8,\ufeff" + str;
        });

        layui.table.on('tool(grid)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'del') { //删除
                delRecord("/backend/security/customer/del", obj)
            } else if (layEvent === 'change') { //删除
                changeStatus(data.id, data.isBlacklist);
            } else if (layEvent === 'edit') { //编辑
                openDialog({
                    url: "/backend/security/customer/detail?id=" + data.id,
                    area: ["99%", "99%"]
                });
            } else if (layEvent === 'promotionList') { //编辑
                openDialog({
                    url: "/backend/security/customer/promotionList?id=" + data.id,
                    area: ["75%", "85%"]
                });
            } else if (layEvent === 'moreVip') { //编辑
                openDialog({
                    url: "/backend/security/customer/moreVipForm?id=" + data.id,
                    area: ["35%", "45%"]
                });
            }
        });


        //变更标签状态
        function changeStatus(id, isBlacklist) {
            if (isBlacklist == "0") {
                $.post('/backend/security/customer/update', {id: id, isBlacklist: 1}, function (res) {
                        if (res.code < 0) {
                            layer.msg(res.message);
                        }
                        else {
                            layer.msg("加入推广黑名单成功");
                            tableIns.reload();
                        }
                    }
                )
            } else if (isBlacklist = "1") {
                $.post('/backend/security/customer/update', {id: id, isBlacklist: 0}, function (res) {
                        if (res.code < 0) {
                            layer.msg(res.message);
                        }
                        else {
                            layer.msg("解除推广黑名单成功");
                            tableIns.reload();
                        }
                    }
                )
            }
        }

        layui.form.on('submit(addBtn)', function () {
            openDialog({
                url: "/backend/security/customer/detail",
                area: ["99%", "99%"]
            });
            return false;
        });

        layui.form.on('submit(searchBtn)', function (data) {
            tableIns.reload({
                where: data.field
            });

            $.post('/backend/security/customer/customerList', {
                nickName: $("#nickName").val(),
                account: $("#account").val(),
                isVip: $("#isVip").val(),
                addTimeSt: $("#addTimeSt").val(),
                addTimeEt: $("#addTimeEt").val()
            }, function (res) {
                if (res.code < 0) {
                    layer.msg(res.message);
                }
                else {
                    allStr = res.body;
                }
            });
            return false;
        });
    })
</script>
<script type="text/html" id="vipTpl">
    {{#  if(d.isVip ===0){ }}
    <span>非会员</span>
    {{#  } else if(d.isVip ===1){ }}
    <span style="color: green;">试用会员</span>
    {{#  } else if(d.isVip ===2){ }}
    <span style="color: blue;">任享会员</span>
    {{#  } else if(d.isVip ===3){ }}
    <span style="color: red;">畅享会员</span>
    {{#  } else if(d.isVip ===4){ }}
    <span style="color: yellow;">季卡会员</span>
    {{#  } }}
</script>
<script type="text/html" id="blacklistTpl">
    {{#  if(d.isBlacklist ===0){ }}
    <span style="color: green;">正常</span>
    {{#  } else if(d.isBlacklist ===1){ }}
    <span style="color: red;">黑名单</span>
    {{#  } }}
</script>
<script type="text/html" id="openVipTpl">
    {{#  if(d.isVip > 0 &&d.codeId >0){ }}
    <span>兑换码</span>
    {{#  } else if(d.isVip > 0 &&d.parentCustomerId >0){ }}
    <span>推广二维码</span>
    {{#  } else if(d.isVip > 0 &&d.parentBdUserId >0){ }}
    <span>员工推广</span>
    {{#  } else if(d.isVip > 0 &&d.parentBdId >0){ }}
    <span>代理商推广</span>
    {{#  } else if(d.isVip > 0){ }}
    <span>平台开通</span>
    {{#  } }}
</script>
<script type="text/html" id="opbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  if(d.isVip>1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="moreVip">延长会员时间</a>
    {{#  } }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="change">变更推广黑名单状态</a>
    {{#  if(d.tgCount>0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="promotionList">查看被推广名单</a>
    {{#  } }}
</script>
</body>
</html>
